<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--树结构-->
      <el-col :span="isHide ? 1 : 6" :xs="24" class="relative">
        <div class="app-container-tree-border">
          <project-tree-select-inner class="cd-mb8" :projectId="projectId" @changeProject="changeProject" />
          <el-tree :data="treeList" :props="defaultProps" ref="tree" node-key="id" highlight-current
            @node-click="handleNodeClick">
            <div slot-scope="{node, data}" class="custom-tree-node" :title="node.label" v-text="node.label"></div>
          </el-tree>
          <div class="tree-hide-button iconfont" :class="isHide ? 'icon-xiangyou' : 'icon-xiangzuo'"
            @click="() => { isHide = !isHide }">
          </div>
        </div>
      </el-col>
      <el-col :span="isHide ? 23 : 18" :xs="24">
        <div class="app-container-table-border">
          <div class="cd-text-xxlg text-center cd-mb8">
            <span>{{ treeInfo.label }}{{ treeInfo.bdName }}开票明细汇总表</span>
            <div class="top-right-btn" v-if="dataList.length > 0">
              <!-- <el-button v-if="!isUpdate" type="primary" plain size="mini" @click="onUpdate"
              v-hasPermi="['cm:billingSummary:export']">编辑</el-button>
            <el-button v-else type="primary" plain size="mini" @click="doUpdate"
              v-hasPermi="['cm:billingSummary:export']">保存</el-button> -->
              <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </div>
          </div>
          <el-table class="report-table" border stripe :data="dataList" :summary-method="getSummaries" show-summary
            :max-height="tableHeight">
            <el-table-column type="index" width="50" align="center" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="zdName" header-align="center" align="left" label="站点" min-width="180"
              show-overflow-tooltip />
            <el-table-column prop="dyckpje" header-align="center" align="right" label="第一次开票金额" min-width="120"
              show-overflow-tooltip />
            <el-table-column prop="bckpje" header-align="center" align="right" label="本次开票金额" min-width="120"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input-number v-if="isUpdate" size="mini" v-model="scope.row.bckpje" :precision="2" :min="0"
                  :controls="false" style="width: 100%"></el-input-number>
                <span v-else>{{ scope.row.bckpje }}</span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="right" prop="bqzfje" label="本次支付金额" min-width="120">
              <!-- <el-table-column prop="bqzfje" align="center" label="本次支付金额" min-width="120" show-overflow-tooltip /> -->
              <!-- <el-table-column prop="zdhjbqzfje" align="center" label="站点合计" min-width="120" show-overflow-tooltip /> -->
            </el-table-column>
            <el-table-column header-align="center" align="right" prop="yzfje" label="已支付金额" min-width="120">
              <!-- <el-table-column prop="yzfje" align="center" label="预付款金额（扣除奖励基金）" min-width="120" show-overflow-tooltip />
            <el-table-column prop="zdhjyzfje" align="center" label="站点合计" min-width="120" show-overflow-tooltip /> -->
            </el-table-column>
            <el-table-column header-align="center" align="right" prop="ljzfje" label="累计支付金额" min-width="120">
              <!-- <el-table-column prop="ljzfje" align="center" label="累计支付金额" min-width="120" show-overflow-tooltip />
            <el-table-column prop="zdhjljzfje" align="center" label="站点合计" min-width="120" show-overflow-tooltip /> -->
            </el-table-column>
            <el-table-column prop="dkpje" header-align="center" align="right" label="多开票金额" min-width="120"
              show-overflow-tooltip />
          </el-table>
          <!-- <img src="./4.png" alt="开票汇总" style="width: 100%;" /> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryBdQsTree } from "@/api/base/bsBd";
import { queryInvoiceSummary } from "@/api/cm/billingSummary";
import { mapGetters } from "vuex";
import decimal from "@/utils/big-decimal";

export default {
  name: "BillingSummary",
  data () {
    return {
      isHide: false,
      isUpdate: false,
      projectInfo: {},
      treeList: [],
      treeInfo: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 期数表格数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        settleIndex: undefined,
        settleName: undefined,
      },
      tableHeight: document.documentElement.scrollHeight - 170

    };
  },
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["sysProjectId", "sysProjectList"])
  },
  watch: {
    sysProjectId (newVal, oldVal) {
      // 系统顶部选中项目变化
      this.changeProject(newVal);
    }
  },
  created () {
    this.changeProject();
  },
  methods: {
    changeProject (projectId = this.sysProjectId) {
      this.projectId = projectId;
      this.projectInfo = this.sysProjectList.find(item => item.projectId === this.projectId);
      this.projectChangeResetQuery();
      this.getQsTree();
    },
    getQsTree () {
      queryBdQsTree({ projectId: this.projectId }).then(response => {
        this.treeList = response.data;
      });
    },
    handleNodeClick (data) {
      if (data.type == 'qs') {
        this.queryParams.qsId = data.id;
        this.queryParams.bdId = data.parentId;
        const info = this.treeList.find(item => item.id == data.parentId);
        this.treeInfo = { ...data, bdName: info.label };
        this.getTableList();
      }
    },
    projectChangeResetQuery () {
      this.queryParams = {
        qsId: undefined,
        bdId: undefined,
      };
      this.dataList = [];
      this.projectInfo = this.sysProjectList.find(item => item.projectId === this.projectId);

    },
    getTableList () {
      this.loading = true;
      this.isUpdate = false;
      const info = {
        qsId: this.queryParams.qsId,
        bdId: this.queryParams.bdId,
      };
      queryInvoiceSummary(info).then(response => {
        this.dataList = [...response.data];
        this.loading = false;
      });
    },
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = '合计金额';
          return;
        }
        if (index >= 2) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return decimal.add(prev, curr);
              } else {
                return decimal.round(prev);
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        }
      });

      return sums;
    },
    onUpdate () {
      this.isUpdate = true;
    },
    doUpdate () {
      console.log(this.dataList);
      this.isUpdate = false;
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('cm/bdQsCount/exportInvoiceSummary', {
        ...this.queryParams
      }, `开票汇总_${new Date().getTime()}.xlsx`);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .report-table {
  .el-table__header-wrapper th {
    // height: 22px !important;
    // padding: 0 !important;
  }
}
</style>
